<template>
  <div>
    <el-tabs v-model="activeName">
    <el-tab-pane label="北京碳交易市场成交均价趋势图(BEA)" name="first"> 
        <div ref="chart" style="width: 1000px; height: 600px"></div></el-tab-pane>
    <el-tab-pane label="北京碳交易市场成交均价趋势图(CCER)" name="second">
        <div ref="chart2" style="width: 1000px; height: 600px"></div></el-tab-pane>
        <el-tab-pane label="上海碳交易市场成交均价趋势图(CCER)" name="third">
        <div ref="chart12" style="width: 1000px; height: 600px"></div></el-tab-pane>
    <el-tab-pane label="上海碳交易市场成交均价趋势图(SHEA)" name="fourth"><div ref="chart11" style="width: 1000px; height: 600px"></div></el-tab-pane>
    <el-tab-pane label="广东碳交易市场成交均价趋势图(GDEA)" name="fifth">
        <div ref="chart21" style="width: 1000px; height: 600px"></div></el-tab-pane>
</el-tabs>
   
    <br />
  </div>
</template>
  
  <script>
import axios from "axios";
import * as echarts from "echarts";

export default {
  data() {
    return {
        activeName: 'first'
    };
  },
  mounted() {
    this.renderChart();
    this.renderChart2();
    this.renderChart11();
    this.renderChart12();
    this.renderChart21();
  },
  methods: {
    renderChart() {
      const chartData = {
        legendData: [],
        seriesData: [],
      };
      const chart = echarts.init(this.$refs.chart);

      axios.get("/api/getdata").then(function (response) {
        const data = response.data;
        data.forEach((item) => {
            console.log(item);
          chartData.legendData.push(item.tradeDate); // 将id映射到legendData的name
          chartData.seriesData.push(item.averagePrice); // 映射totalViews到value
        });
        console.log(chartData);
        const { legendData, seriesData } = chartData;
        const  options = {
        title: {
          text: '北京碳交易市场成交均价趋势图(BEA)',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        xAxis: {
          type: 'category',
          data: legendData,
        },
        yAxis: {
          type: 'value',
          name: '成交均价（元/吨）',
        },
        series: [
          {
            name: '成交均价（元/吨）',
            type: 'line',
            data: seriesData,
          },
        ],
      };

        chart.setOption(options);
      });
    },
    renderChart2() {
      const chartData = {
        legendData: [],
        seriesData: [],
      };
      const chart = echarts.init(this.$refs.chart2);

      axios.get("/api/getdata/sec").then(function (response) {
        const data = response.data;
        data.forEach((item) => {
            console.log(item);
          chartData.legendData.push(item.tradeDate); // 将id映射到legendData的name
          chartData.seriesData.push(item.averagePrice); // 映射totalViews到value
        });
        console.log(chartData);
        const { legendData, seriesData } = chartData;
        const  options = {
        title: {
          text: '北京碳交易市场成交均价趋势图(CCER)',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        xAxis: {
          type: 'category',
          data: legendData,
        },
        yAxis: {
          type: 'value',
          name: '成交均价（元/吨）',
        },
        series: [
          {
            name: '成交均价（元/吨）',
            type: 'line',
            data: seriesData,
          },
        ],
      };

        chart.setOption(options);
      });
    },
    renderChart12() {
      const chartData = {
        legendData: [],
        seriesData: [],
      };
      const chart = echarts.init(this.$refs.chart12);

      axios.get("/api/getdata/thir").then(function (response) {
        const data = response.data;
        data.forEach((item) => {
            console.log(item);
          chartData.legendData.push(item.tradeDate); // 将id映射到legendData的name
          chartData.seriesData.push(item.averagePrice); // 映射totalViews到value
        });
        console.log(chartData);
        const { legendData, seriesData } = chartData;
        const  options = {
        title: {
          text: '上海碳交易市场成交均价趋势图(CCER)',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        xAxis: {
          type: 'category',
          data: legendData,
        },
        yAxis: {
          type: 'value',
          name: '成交均价（元/吨）',
        },
        series: [
          {
            name: '成交均价（元/吨）',
            type: 'line',
            data: seriesData,
          },
        ],
      };

        chart.setOption(options);
      });
    },
    renderChart11() {
      const chartData = {
        legendData: [],
        seriesData: [],
      };
      const chart = echarts.init(this.$refs.chart11);

      axios.get("/api/getdata/for").then(function (response) {
        const data = response.data;
        data.forEach((item) => {
            console.log(item);
          chartData.legendData.push(item.tradeDate); // 将id映射到legendData的name
          chartData.seriesData.push(item.averagePrice); // 映射totalViews到value
        });
        console.log(chartData);
        const { legendData, seriesData } = chartData;
        const  options = {
        title: {
          text: '上海碳交易市场成交均价趋势图(SHEA)',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        xAxis: {
          type: 'category',
          data: legendData,
        },
        yAxis: {
          type: 'value',
          name: '成交均价（元/吨）',
        },
        series: [
          {
            name: '成交均价（元/吨）',
            type: 'line',
            data: seriesData,
          },
        ],
      };

        chart.setOption(options);
      });
    },
    renderChart21() {
      const chartData = {
        legendData: [],
        seriesData: [],
      };
      const chart = echarts.init(this.$refs.chart21);

      axios.get("/api/getdata/fif").then(function (response) {
        const data = response.data;
        data.forEach((item) => {
            console.log(item);
          chartData.legendData.push(item.tradeDate); // 将id映射到legendData的name
          chartData.seriesData.push(item.averagePrice); // 映射totalViews到value
        });
        console.log(chartData);
        const { legendData, seriesData } = chartData;
        const  options = {
        title: {
          text: '广东碳交易市场成交均价趋势图(GDEA)',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        xAxis: {
          type: 'category',
          data: legendData,
        },
        yAxis: {
          type: 'value',
          name: '成交均价（元/吨）',
        },
        series: [
          {
            name: '成交均价（元/吨）',
            type: 'line',
            data: seriesData,
          },
        ],
      };

        chart.setOption(options);
      });
    },
  },
};
</script>
  
  <style>
</style>